<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<%@ include file="../../include.jsp" %>
<%@ include file="../../mobilehead_inc.jsp" %>
<script type="text/javascript" src="${ctx }/plugin/jquery.fly/jquery.fly.min.js"></script> 
<title>订餐首页</title>
<script type="text/javascript">


function Commoditysort(commodityInfo){
	for(var i = 0; i<commodityInfo.length; i++) {
		//console.log(commodityInfo[i]);
		 for(var y = 0; y <commodityInfo.length - i - 1; y++){
			if(commodityInfo[y].commodityCategory.categoryId > commodityInfo[y+1].commodityCategory.categoryId){
				var temp = commodityInfo[y];       						
				commodityInfo[y] = commodityInfo[y+1];
				commodityInfo[y+1] = temp;
				
			}
			
		}
		 
		
	}
}
	//获得商品和公告
	 $(document).ready(function () {			  
	    $.ajax({
	        url: '${ctx}/mobile/getCommodity',
	        dataType: "json",
	        async: true,
	        success: function (result) {		        	
	        	if(result.obj != null){
	        		//console.log(result);
	        		console.log(result.obj);
	        		//console.log(result.obj.sort(compare("commodityCategory")));
	        		var commodityInfo = result.obj;
	        		 var sortCommodity = new Array();
	        		 for(var i = 0; i<commodityInfo.length; i++) {
	        				//console.log(commodityInfo[i]);
	        				 for(var y = 0; y <commodityInfo.length-i-1; y++){
	        					if(commodityInfo[y].commodityCategory.categoryId >= commodityInfo[y+1].commodityCategory.categoryId){
	        						var temp = commodityInfo[y];       						
	        						commodityInfo[y] = commodityInfo[y+1];
	        						commodityInfo[y+1] = temp;
	        						
	        					}
	        					
	        				}
	        				 sortCommodity.push(temp);
	        				 	        				
	        			}
	        		 console.log(sortCommodity);
	        		//显示公告
	        		$("#notcontent").html(result.rows.content);
	        		//分组	        		
					flag = 0;
					data = [];          
					for(var i = 0; i<result.obj.length; i++) {
					    var az = '';
					    for (var j = 0; j < data.length; j++) {
					        if(data[j][0].commodityCategory.name == result.obj[i].commodityCategory.name) {
					            flag = 1;
					            az = j;
					            break;
					        }
					    }
					    if(flag == 1){
					        data[az].push(result.obj[i]);
					        flag = 0;
					    } else if (flag == 0) {
					        wdy = new Array();
					        wdy.push(result.obj[i]);
					        data.push(wdy);
					    }
					}
					//console.log(data);
					//console.log(data[0][0].commodityCategory.categoryId);
					for(i=0;i<data.length;i++){
						
						$('#goods_list').find('table').append(
                                
			        			"	 <thead id=thead"+i+">                            "+
					            "       <td>                            "+
					            "           <a></a><strong id=strong"+i+">"+data[i][0].commodityCategory.name+"</strong>"+
					            "       </td>                           "+						           						            						           
			               		"</thead>                               "+
			               		"<tbody id=tbody"+i+">								"+
			               		"</tbody>								"	
			        		
			        		);						
						var index_tr = 0;
						$(data[i]).each(function(k,info){														
							if(k>0&&k%3==0){index_tr++;}
							if(k%3==0){$("#tbody"+i).append("<tr id=tr"+index_tr+""+i+"></tr>");} 
							  $("#tr"+index_tr+i).append(
	        						
	        						"  <td>                                                                "+
	        						"	<div class='goods_item'>                                           "+
	        						"		<img src='"+info.photo+"'>                         "+
	        						"		<a>"+info.names+"</a>                                                  "+
	        						"		<a class='goods_price'>￥ <del>"+info.nativePrice+"</del><strong>"+info.price+"</strong></a> "+
	        						"		<div><img src='${ctx }/images/cart.png'></div>                "+
	        						"		<input type='hidden' value='"+info.commodityId+"' class='goods_id' />             "+
	        						"		<input type='hidden' value='"+info.number+"' class='goods_left' />           "+
	        						"	</div>                                                             "+
	        						"</td>                                                                 "		        					
	        					); 							
						});						
					}
					 $('.goods_item').children('a').width(window.screen.width/3 - 20);
					
					var _width = $('.goods_item').children('img').width();	
					
					$('.goods_item').children('img').height(_width); 
					InitFly();	        				        	
	       		}
	        },
	        error: function (request, error) {
	        	$("#queryCom").append("<div class='am-alert'> 暂时没有推荐哦 ！ </div>");
	        }
	        
	    });    
	}); 
	
	 function InitFly()
	{
		var offset = $("#circle_cart_count").offset(); 
		
	    $(".goods_item").click(function(event){ 
	        var addcar = $(this); 
	        var img = addcar.children('img').attr('src'); 
			var commodityId = addcar.find('.goods_id').val();
			var leftCount = parseInt(addcar.find('.goods_left').val());
			console.log(commodityId,leftCount);
	        var flyer = $('<img class="u-flyer" src="'+img+'">'); 
	        flyer.fly({ 
	            start: { 
	                left: event.clientX, //开始位置（必填）#fly元素会被设置成position: fixed 
	                top: event.clientY //开始位置（必填） 
	            }, 
	            end: {
					 
	                left: offset.left, //结束位置（必填） 
	                top: offset.top, //结束位置（必填） 
	                width: 4, //结束时宽度 
	                height: 4 //结束时高度
					 
	            }, 
	            onEnd: function(){ //结束回调 
					AddToCart(commodityId, 1, leftCount);
					
					$("#circle_cart_count").html(GetCartCount());
					
	                this.destroy() //移除dom 
	            } 
	        }); 
	    }); 
	} 
</script>
<script>
		
		
		
		//格式化日期
		function formatDate (strTime) {
		    var date = new Date(strTime);
		    return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
		}
		 
		 
		 
		 function isNull( str ){
				if ( str == "" ) return true;
				var regu = "^[ ]+$";
				var re = new RegExp(regu);
				return re.test(str);
			}
		 
		var scontent;
		var pageArray = [];
		var allCount;//获取总记录条数
		var allPage;//计算出总共页数
		var currentPage = 1;//设置当前页
		var rows = 10;//设置每页列数
		
		function searchComm(){
			scontent =  encodeURI(encodeURI($("#content_search").val()));
			if(scontent == null || scontent == "" || isNull( scontent )){
				alert("请输入搜索条件！");
			}else{
				loadMsg(1);
			}
			
		}
		
		function loadMsg(page){
			currentPage = page;
			$.ajax({
		        url: '${ctx}/mobile/searchComm?content='+scontent+'&page='+page+'&rows='+rows+'',
		        dataType: "json",
		        async: true,
		        success: function (result) {
		        	console.log(result);

		        	if(result.obj != null && result.obj.length > 0){
		        		
		        		$("#goods_list table").empty();
		        		flag = 0;
						data = [];          
						for(var i = 0; i<result.obj.length; i++) {
						    var az = '';
						    for (var j = 0; j < data.length; j++) {
						        if(data[j][0].commodityCategory.name == result.obj[i].commodityCategory.name) {
						            flag = 1;
						            az = j;
						            break;
						        }
						    }
						    if(flag == 1){
						        data[az].push(result.obj[i]);
						        flag = 0;
						    } else if (flag == 0) {
						        wdy = new Array();
						        wdy.push(result.obj[i]);
						        data.push(wdy);
						    }
						}
						console.log(data);
						console.log(data[0][0].commodityCategory.name);
						for(i=0;i<data.length;i++){
							
							$('#goods_list').find('table').append(
	                                
				        			"	 <thead id=thead"+i+">                            "+
						            "       <td>                            "+
						            "           <a></a><strong id=strong"+i+">"+data[i][0].commodityCategory.name+"</strong>"+
						            "       </td>                           "+						           						            						           
				               		"</thead>                               "+
				               		"<tbody id=tbody"+i+">								"+
				               		"</tbody>								"	
				        		
				        		);						
							var index_tr = 0;
							$(data[i]).each(function(k,info){														
								if(k>0&&k%3==0){index_tr++;}
								if(k%3==0){$("#tbody"+i).append("<tr id=tr"+index_tr+""+i+" ></tr>");} 
								  $("#tr"+index_tr+i).append(
		        						
		        						"  <td >                                                                "+
		        						"	<div class='goods_item' style='width:33.3%' >                                           "+
		        						"		<img src='"+info.photo+"'>                         "+
		        						"		<a>"+info.names+"</a>                                                  "+
		        						"		<a class='goods_price'>￥ <del>"+info.nativePrice+"</del><strong>"+info.price+"</strong></a> "+
		        						"		<div><img src='../../../images/cart.png'></div>                "+
		        						"		<input type='hidden' value='"+info.commodityId+"' class='goods_id' />             "+
		        						"		<input type='hidden' value='"+info.number+"' class='goods_left' />           "+
		        						"	</div>                                                             "+
		        						"</td>                                                                 "		        					
		        					); 							
							});						
						}
						 $('.goods_item').children('a').width(window.screen.width/3 - 20);
						
						var _width = $('.goods_item').children('img').width();	
						
						$('.goods_item').children('img').height(_width); 
						InitFly();
		        		
		        	}else{
		        		$("#goods_list").empty();
		        		$("#goods_list").append("<center>没有找到相关商品！</center>");
		        	}
		
		        },
		        error: function (request, error) {
		        	$("#goods_list").empty();
	        		$("#goods_list").append("<center>没有找到相关商品！</center>");
		        }
		        
		    });
		} 
</script>
<style type="text/css">
#queryCom img {
   width:40%;
   height:150px;
   border: 5px;
   margin: 5px;
   border-color: gray
}
#mydiv{
	border: 1px solid white;
	text-align: center;
	padding: 2px
}
#myform{
	margin-left: 5px;
	margin-right: 5px;
	}
.notice{
    width: 100%;
    height: 25px;
  /*   border-bottom: 1px solid #d4c3b3; */
   /*  border-top: 1px solid #d4c3b3; */   
    background: #f8f8f8;
}
.notice-a{
margin-left:2%;
position:absolute;
width:20%;
}
.notice-c{
margin-left:18%;
display:block;
width:78%;
height:25px;

}

/*商品css*/
.good_category{

width:100%;
height:30px;
background:#eee;

}

#goods_list
{
	width: 100%;
	margin-bottom: 49px;
}

#goods_list table
{
	width: 100%;
	border-collapse: collapse;
	background-color: #fff
}

#goods_list thead td a
{
	float: left;
	height: 20px;
	width: 4px;
	background-color: #ccc;
	margin: 12px 11px;
}

#goods_list thead td strong
{
	float: left;
	margin: 10px 0px;
}

#goods_list tbody td
{
	width: 33.3%;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    overflow: hidden;
    border-radius: 7px;
    background-color: #f5f5f5;
}

#goods_list tbody td.empty
{
	border: 0;
}

.goods_item
{
	position: relative;
	width: 100%;
}

.goods_item img
{
	width: 100%;
	height:106px;
	border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.goods_item a
{
	display: block;
	margin: 4px 8px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	/* text-align: center; */
}

.goods_item .goods_price
{
	color: #f93916;
}

.goods_item .goods_price strong
{
	font-size: 16px;
}

.goods_item div
{
	position: absolute;
	height: 18px;
	bottom: 0px;
	right: 0px;
	border-left: 1px dashed #cccccc;
}

.goods_item div img
{
	width: 33px;
	height: 18px;
}

.u-flyer
{
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	position: fixed;
	z-index: 9999;
}

</style>

</head>
<!-- background:#9999FF; -->
<!-- style="background:#FFFFCC" -->
<body>
	<header data-am-widget="header" class="am-header am-header-default joan-head" style="background:#9999FF;position:fixed;z-index:1001;margin-bottom;" >
	      <div class="gm-head-search"  style="margin-top:7px;" >
	         <a><input id="content_search" type="text" placeholder="搜索餐品名称"><i onclick="searchComm();" class="am-icon-search" style="margin-top:5px" ></i></a>
	      </div>
	 
</header>
<div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}' style="background:#FFFFCC;padding-top:49px;height: 190px;">
  		<ul class="am-slides">
	      <li>
	        	<img src="${ctx }/images/1.jpg" style="height:141px;">
	      </li>
	      <li>
	        	<img src="${ctx }/images/2.jpg" style="height:141px;">  
	      </li>
	      <li>
	      	<img src="${ctx }/images/4.jpg" style="height:141px;">
	      </li>
	      <li>
	        	<img src="${ctx }/images/2.jpg" style="height:141px;">
	      </li>
 	 </ul>
</div>

 <!-- 公告走马灯 -->  
 <div  class="notice" >
	<div class="notice-a">公告：</div> 
	<div class="notice-c">
    	<marquee  direction="right"  loop="-1" scrollamount="10"  align="right" >
    		<font color=red id="notcontent"></font>
        </marquee>
    </div>	  	         	
</div>
 	  <div id="goods_list">
 	    <table>
               
        </table>           
      </div> 
<!-- 底部 -->
 <jsp:include page="bottombar.jsp">
	    <jsp:param name="index" value="1"/>
  </jsp:include> 
</body>
</html>